<template>
<mobile-tear-sheet>
  <mu-list>
    <mu-divider/>
    <mu-sub-header>即将到来</mu-sub-header>
    <mu-list-item title="Mike Li">
      <mu-avatar :src="avatar1" slot="leftAvatar"/>
      <span slot="right" color="pinkA200" :style="{'margin-left': '-88px'}" backgroundColor="transparent">倒数
      <mu-badge content="13" secondary slot="after"/>天</span>
    </mu-list-item>
    <mu-list-item title="Maco Mai">
      <mu-avatar :src="avatar2" slot="leftAvatar"/>
      <span slot="right" color="pinkA200" :style="{'margin-left': '-88px'}" backgroundColor="transparent">倒数
      <mu-badge content="23" secondary slot="after"/>天</span>
    </mu-list-item>
  </mu-list>
  <mu-divider/>
  <mu-list>
    <mu-sub-header>过去生日</mu-sub-header>
    <mu-list-item title="赵丽颖">
      <mu-avatar :src="avatar5" slot="leftAvatar"/>
      <span slot="right" color="pinkA200" :style="{'margin-left': '-88px'}" backgroundColor="transparent">已过10天</span>
    </mu-list-item>
    <mu-list-item title="科比">
      <mu-avatar :src="avatar6" slot="leftAvatar"/>
      <span slot="right" color="pinkA200" :style="{'margin-left': '-88px'}" backgroundColor="transparent">已过11天</span>
    </mu-list-item>
  </mu-list>
</mobile-tear-sheet>
</template>

<script>
// import mobileTearSheet from '../../../components/mobileTearSheet'
import avatar1 from '../assets/images/avatar1.jpg'
import avatar2 from '../assets/images/avatar2.jpg'
import avatar5 from '../assets/images/avatar5.jpg'
import avatar6 from '../assets/images/avatar6.jpg'

export default {
  data () {
    return {
      avatar1,
      avatar2,
      avatar5,
      avatar6
    }
  }
  // components: {
  //   'mobile-tear-sheet': mobileTearSheet
  // }
}
</script>